<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizables Test Page</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../ui.core.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>

<script type="text/javascript" src="../effects.core.js"></script>
<script type="text/javascript" src="../effects.bounce.js"></script>
<script type="text/javascript" src="../effects.scale.js"></script>


<style type="text/css" media="all">
body {
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.proxy {
	border: 1px dashed #000/*#3399ff*/;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 900px;
}
#faux {
 overflow: hidden;
 width: 900px;
 background: #E8EEF7;
}
#header {
 color: #333;
 width: 900px;
 height: 100px;
 background: #ABBEBE;
}
#leftcolumn { 
 display: inline;
 color: #333;
 padding: 0px;
 width: 200px;
 height: 400px;
 float: left;
 background: #ABBEBE;
}
#content { 
 /*float: left;*/
 color: #333;
 padding: 0px;
 height: 400px;
 display: inline;
 position: relative;
}
.clear { clear: both; background: none; }
</style>
</head>
<body >

 <div id="wrapper">
 
	<div id="header">
   This is the Header		 
	</div>
	 
	<div id="faux">
		<div id="leftcolumn">
 				Left column<br>
		</div>
		<div id="content">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta elit quis pede. Integer condimentum orci id elit. Etiam magna urna, nonummy sit amet, dignissim sed, commodo ac, enim. Morbi vestibulum purus eget justo. Vivamus quis tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed erat mi, suscipit eget, nonummy sit amet, posuere non, sem. Nulla venenatis feugiat odio. Etiam purus. Suspendisse placerat. Morbi pellentesque, nisi vitae convallis facilisis, magna libero fringilla dolor, at tincidunt turpis nisl eu tortor. Mauris id justo. Aliquam gravida nisi eu nulla. Ut rutrum mi ac sem. Suspendisse blandit, nulla quis molestie tristique, risus enim viverra arcu, eu scelerisque felis ante non leo.
		</div>
	</div>
	  
 </div>
	 
</body>
</html>

<script>
	
	$(function() {
		
		$('#leftcolumn').resizable({
			handles: 'e',
			maxWidth: 300,
			animate: true
		});
		
		$('#header').resizable({
			handles: 's',
			animate: true,
			ghost: true
		});
		
	});
	
</script>